<template>
<div :class="[$style.container]">

  <el-link type="primary" :underline="false" class="ml-2" @click="onBack">
    <span><i class="el-icon-back"></i> 返回</span>
  </el-link>

  <el-dropdown trigger="click" class="ml-3">
    <el-link :underline="false" class="ml-3">{{spaceText}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item class="selected" @click.native="onSelectSpace(null)">
        <span class="mx-3">所有空间</span>
      </el-dropdown-item>
      <el-dropdown-item :class="[selectSpaceCls(row)]" v-for="(row, i) in spaces" :key="i"  @click.native="onSelectSpace(row.ownId)">
        <span class="mx-3">{{row.name}}</span>
      </el-dropdown-item>
      <!-- <el-dropdown-item  @click.native="onSelectSpace(-1)">
        <span class="mx-3">我的文档</span>
      </el-dropdown-item> -->
    </el-dropdown-menu>
  </el-dropdown>

  <el-dropdown trigger="click" class="ml-3">
    <el-link :underline="false" class="ml-3">{{currentContentType && currentContentType.label}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :class="[selectContentTypeCls(row)]" v-for="(row, i) in contentTypes" :key="i" @click.native="onSelectContentType(row)">
        <span class="mx-3">{{row.label}}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

  <el-dropdown trigger="click" class="ml-3">
    <el-link :underline="false" class="ml-3">{{currentModifiedTime && currentModifiedTime.label}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :class="[selectModifiedTimeCls(row)]" v-for="(row, i) in modifiedTimes" :key="i" @click.native="onSelectModifiedTime(row)">
        <span class="mx-3">{{row.label}}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

  <el-dropdown trigger="click" class="ml-3">
    <el-link :underline="false" class="ml-3">{{currentSize && currentSize.label}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :class="[selectSizeCls(row)]" v-for="(row, i) in sizes" :key="i" @click.native="onSelectSize(row)">
        <span class="mx-3">{{row.label}}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

  <el-dropdown trigger="click" class="ml-3">
    <el-link :underline="false" class="ml-3">{{currentMode && currentMode.label}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :class="[selectModeCls(row)]" v-for="(row, i) in modes" :key="i" @click.native="onSelectMode(row)">
        <span class="mx-3">{{row.label}}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>
</template>

<script lang="ts">

import { getRecentDocs } from '@/api/recent'
import { getSuffixesByType } from '@/config/content-type'
import { PageData, PageQueryParams } from '@/config/page'
import { AppModule } from '@/store'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'

@Component
export default class QueryForm extends Vue {
  @Prop(String) keyword!: string

  @Prop() data!: PageData<any>

  @AppModule.State spaces!: any[]

  form = {
    contentType: '',
    modifiedTime: '',
    size: '',
    ownId: null,
    fulltext: false
  }

  selectContentTypeCls (row: any) {
    return this.currentContentType.value === row.value ? 'selected' : ''
  }

  selectModifiedTimeCls (row: any) {
    return this.currentModifiedTime.value === row.value ? 'selected' : ''
  }

  selectSizeCls (row: any) {
    return this.currentSize.value === row.value ? 'selected' : ''
  }

  selectSpaceCls (row: any) {
    return this.form.ownId === row ? 'selected' : ''
  }

  selectModeCls (row: any) {
    return this.currentMode?.value === row.value ? 'selected' : ''
  }

  contentTypes = [
    { name: 'contentType', value: '', label: '全部类型', icon: 'file' },
    { name: 'contentType', value: getSuffixesByType('office').join(','), label: 'office文档', icon: 'word' },
    { name: 'contentType', value: getSuffixesByType('pdf').join(','), label: 'PDF', icon: 'pdf' },
    { name: 'contentType', value: getSuffixesByType('image').join(','), label: '图片', icon: 'image' },
    { name: 'contentType', value: getSuffixesByType('video').join(','), label: '视频', icon: 'video' },
    { name: 'contentType', value: getSuffixesByType('audio').join(','), label: '音频', icon: 'audio' },
    { name: 'contentType', value: getSuffixesByType('text').join(','), label: '文本', icon: 'text' }
  ]

  modifiedTimes = [
    { name: 'modifiedTime', value: '', label: '不限时间' },
    { name: 'modifiedTime', value: '1,0', label: '1天内' },
    { name: 'modifiedTime', value: '7,0', label: '7天内' },
    { name: 'modifiedTime', value: '30,0', label: '30天内' },
    { name: 'modifiedTime', value: '365,0', label: '一年内' }
  ]

  sizes = [
    { name: 'size', value: '', label: '不限大小' },
    { name: 'size', value: '0,1', label: '0-1M' },
    { name: 'size', value: '1,5', label: '1-5M' },
    { name: 'size', value: '5,25', label: '5-25M' },
    { name: 'size', value: '25,100', label: '25-100M' },
    { name: 'size', value: '100,1024', label: '100M-1G' },
    { name: 'size', value: '1024,', label: '1G+' }
  ]

  modes = [
    { name: 'fulltext', value: false, label: '普通搜索' },
    { name: 'fulltext', value: true, label: '全文搜索' }
  ]

  get currentContentType () {
    return this.contentTypes.find((v: any) => this.form.contentType === v.value) || this.contentTypes[0]
  }

  get currentModifiedTime () {
    return this.modifiedTimes.find((v: any) => this.form.modifiedTime === v.value) || this.modifiedTimes[0]
  }

  get currentSize () {
    return this.sizes.find((v: any) => this.form.size === v.value) || this.sizes[0]
  }

  get currentMode () {
    return this.modes.find((v: any) => this.form.fulltext === v.value) || this.modes[0]
  }

  get spaceText () {
    if (!this.form.ownId) return '所有空间'
    // if (this.form.ownId === -1) return '个人空间'
    return this.spaces.find((v: any) => v.ownId === this.form.ownId)?.name
  }

  onSelectContentType (row: any) {
    this.form.contentType = row.value
    this.search()
  }

  onSelectModifiedTime (row: any) {
    this.form.modifiedTime = row.value
    this.search()
  }

  onSelectSize (row: any) {
    this.form.size = row.value
    this.search()
  }

  onSelectMode (row: any) {
    this.form.fulltext = row.value
    this.search()
  }

  onSelectSpace (row: any) {
    this.form.ownId = row || null
    this.search()
  }

  onBack () {
    this.$router.go(-1)
  }

  search () {
    const contentType = this.form.contentType
    const docSize = (this.form.size && this.form.size.split(',').map((v: any) => (v && v * 1024 * 1024) || null)) || null
    const modifiedTime = (this.form.modifiedTime && this.form.modifiedTime.split(',').map((v: any) => (v && addDay(-v)) || null)) || null
    const ownId = this.form.ownId
    const fulltext = this.form.fulltext

    const params = { contentType, docSize, modifiedTime, ownId, fulltext }
    if (this.data) this.data.load(params)

    function addDay (i: number) {
      const d = new Date()
      d.setDate(d.getDate() + i)
      return `${d.getFullYear()}/${n(d.getMonth() + 1)}/${n(d.getDate())} 23:59:59`

      function n (num: number) {
        return ('0' + num).slice(-2)
      }
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 32px;
  display: flex;
  align-items: center;
  background-color: #fff;
}
</style>
